import defaultImg from '@/assets/1x1.png?inline'
// 新增：导入配套的样式表
import './v-lazy.css'

const observer = new IntersectionObserver(
  (entries) => {
    // entries 是一个数组
    entries.forEach((entry) => {
      // entry 是相交信息对象
      if (entry.isIntersecting) {
        // 证明发生了相交
        // 取出图片的真实路径，并设置到元素的 src 属性上
        entry.target.src = entry.target.dataset.src
        // 相交事件的解绑
        observer.unobserve(entry.target)

        // 图片懒加载成功
        entry.target.addEventListener('load', (e) => {
          // 1. 移除元素上的 loading 类名
          e.target.classList.remove('escook-lazy-loading')
          // 2. 移除 data-src
          e.target.removeAttribute('data-src')
        })

        // 图片懒加载失败
        entry.target.addEventListener('error', (e) => {
          e.target.src = defaultImg
          e.target.classList.remove('escook-lazy-loading')
          e.target.classList.add('escook-lazy-error')
        })
      }
    })
  },
  {
    threshold: 0
  }
)

export default {
  // 被指令控制的元素，将要被插入 DOM 中的时候，调用此函数
  beforeMount(el, binding) {
    el.classList.add('escook-lazy-loading')
    el.src = defaultImg
    el.dataset.src = binding.value
    observer.observe(el)
  }
}
